<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <el-button @click="go" icon="el-icon-back" type="text">返回</el-button>
      <div id="lc"></div>
    </el-card>


  </div>
</template>

<script>
  import VueAliplayerV2 from 'vue-aliplayer-v2';
  import "../plugins/imouplay.js"

  export default {
    components: {
      VueAliplayerV2: VueAliplayerV2.Player
    },
    data() {
      return {
        // deviceSerial: this.$route.query.deviceSerial,
        // channelNo: this.$route.query.channelNo,
        // videoToken: this.$route.query.videoToken,
        // monitorType:this.$router.query.monitorType,
        options: {
          height: '80vh'
        }
      };
    },

    mounted() {
      // 重新获取token
      //   getLcToken
      this.$api.loginhome.getLcToken({
        pid: this.$route.query.pid,
        monitorType: 2,
        channelId: this.$route.query.channelNo,
        deviceId: this.$route.query.deviceSerial
      }).then((res) => {
        console.log("res.token", res.data)
        // 初始化乐橙
        const player = new ImouPlayer('#lc');
        player.setup({
          src: [{
            url: `imou://open.lechange.com/${this.$route.query.deviceSerial}/${this.$route.query.channelNo}/1?streamId=1`, // url拼接说明请见：2.2.3 轻应用播放地址说明
            kitToken: res.data, // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明
          }], // 播放地址
          width: "100%", // 播放器宽度
          height: 650, // 播放器高度
          poster: '', // 封面图url
          autoplay: true, // 是否自动播放
          controls: true, // 是否展示控制栏
        });
        // 播放
        player.play();
      })
    },
    methods: {
      //返回
      go() {
        this.$router.go(-1)
      }
    }
  };
</script>

<style scoped>
  .el-card__body h4 {
    margin: 10px 0px;
  }

  .content {
    display: flex;
    justify-content: space-around;
  }

  .box-card_left {
    width: 100%;
    padding: 20px;
  }

  .box-card_right {
    width: 60%;
    padding: 20px;
  }

  .spanfont {
    line-height: 32px;
    font-size: 12px;
    padding-left: 10px;
  }

  /deep/.el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }

  /deep/.el-input__inner {
    width: 250px;
  }

  .form_item_tiem {
    padding-bottom: 40px;
  }

  .el-input {
    width: 84%;
  }

  .el-col .el-col-8 ._button {
    text-align: center;
  }

  .botton_btn {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }

  .btn_left {
    margin-right: 200px;
  }

  .btn_right {
    margin-left: 200px;
  }

  .map_box {
    width: 600px;
    height: 330px;
    background: gainsboro;
    margin-top: 20px;
  }
</style>